<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="开始日期：">
              <el-date-picker
                v-model="STARTDATE"
                type="date"
                placeholderb
                filterable="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期：">
              <el-date-picker
                v-model="ENDDATE"
                type="date"
                placeholderb
                filterable="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="班次名称：">
              <el-input
                v-model="person.SNAME"
                placeholderb
                filterable="请输入班次名称"
                style="width: 150px"
              ></el-input>
            </el-form-item>
            <el-form-item label="人员名称：">
              <el-input
                v-model="person.NAME"
                placeholderb
                filterable="请输入人员名称"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="作业类型：">
              <el-select v-model="workType" placeholder>
                <el-option
                  v-for="item in workTypeList"
                  :key="item.WORKTYPE"
                  :label="item.WORKTYPE"
                  :value="item.WORKTYPE"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="handleAdd"
              >新 增</el-button
            >
            <el-button size="mini" type="success" @click="handleFz"
              >排班复制</el-button
            >
            <el-button size="mini" type="warning" @click="handleYL"
              >遗漏查询</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
      border
    >
      <el-table-column
        prop="NAME"
        label="人员姓名"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="LICENSE_PLATE"
        label="车辆牌照"
        align="center"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="SNAME"
        label="班次名称"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="TYPE"
        label="排班类型"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="ONWORKTIME"
        label="作业开始时间"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="OFFWORKTIME"
        label="作业结束时间"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="LNAME"
        label="标段名称"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="LINENAME"
        label="路线名称"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>作业道路:</p>
            <p>{{ scope.row.ROADNAME }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.LINENAME }}</el-tag>
            </div>
          </el-popover>
        </template></el-table-column
      >
      <!-- <el-table-column
        prop="ROADNAME"
        label="作业道路"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WORKNUM"
        label="作业道路对应遍次"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="WORKDATE"
        label="作业日期"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="SETTIME"
        label="设置时间"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="WORKDATE"
        label="作业日期"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <!-- <el-button type="text" @click="handleFz(scope.$index, scope.row)"
            >排班复制</el-button
          > -->
          <el-button type="text" @click="handleSe(scope.$index, scope.row)"
            >临时调度</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="isVisibleEdit"
      width="50%"
      :modal="false"
    >
      <el-form ref="form" :model="form" label-width="100px" class="flex">
        <el-form-item label="所属组织：" class="wid50">
          <el-select
            v-model="form.CLIENT_NO"
            placeholderb
            filterable
            @change="changeClientOptions"
          >
            <el-option
              v-for="item in clientList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="路线类型："
          class="wid50"
          v-if="this.addDialogTitle === '新增排班计划'"
        >
          <el-select
            v-model="form.WORKTYPE"
            placeholderb
            filterable
            @change="changeClientOptions"
          >
            <el-option
              v-for="item in workTypeList"
              :key="item.WORKTYPE"
              :label="item.WORKTYPE"
              :value="item.WORKTYPE"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="作业路线："
          class="wid50"
          v-if="this.addDialogTitle === '新增排班计划'"
        >
          <el-select
            v-model="form.LINEID"
            placeholderb
            filterable
            @change="changeClientOptions"
          >
            <el-option
              v-for="item in LineData"
              :key="item.LINEID"
              :label="item.LINENAME"
              :value="item.LINEID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="开始日期："
          class="wid50"
          v-if="this.addDialogTitle === '新增排班计划'"
        >
          <el-date-picker
            v-model="form.StartDate"
            type="date"
            placeholderb
            filterable="选择日期"
            value-format="yyyy-MM-dd"
            @change="getVehicleList"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="结束日期："
          class="wid50"
          v-if="this.addDialogTitle === '新增排班计划'"
        >
          <el-date-picker
            v-model="form.EndDate"
            type="date"
            placeholderb
            filterable="选择日期"
            value-format="yyyy-MM-dd"
            @change="changeClientOptions"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <!-- <el-form-item label="作业类型：" class="wid50">
          <el-select
            v-model="form.Type"
            placeholderb
            filterable
            @change="changeClientOptions"
          >
            <el-option
              v-for="item in typeList"
              :key="item.typeNO"
              :label="item.typeNAME"
              :value="item.typeNO"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="作业车辆：" class="wid50">
          <el-select
            v-model="form.VID"
            placeholderb
            filterable
            @change="getDriverList"
          >
            <el-option
              v-for="item in VehicleData"
              :key="item.ID"
              :label="item.NAME"
              :value="item.ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作业司机：" class="wid50">
          <el-select v-model="form.DID" placeholderb filterable>
            <el-option
              v-for="item in DriverData"
              :key="item.ID"
              :label="item.NAME"
              :value="item.ID"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 临时调度弹出框 -->
    <el-dialog
      title="临时调度"
      :visible.sync="isVisibleSe"
      width="60%"
      :modal="false"
    >
      <el-form ref="form" :model="form" label-width="170px" class="flex">
        <el-form-item label="临时调度类型：" class="wid50">
          <el-select v-model="form.sTYPE" placeholder @change="getNewList">
            <el-option
              v-for="item in typeList"
              :key="item.typeNO"
              :label="item.typeNAME"
              :value="item.typeNO"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="临时调度对象：" class="wid50">
          <el-select v-model="form.NID">
            <el-option
              v-for="item in NData"
              :key="item.ID"
              :label="item.NAME"
              :value="item.ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="新作业区域：" class="wid50">
          <el-select v-model="form.NGID" filterable>
            <el-option
              v-for="item in LineData"
              :key="item.GID"
              :label="item.GNAME"
              :value="item.GID"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="开始日期：" class="wid50">
          <el-date-picker
            v-model="form.STARTTIME"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期：" class="wid50">
          <el-date-picker
            v-model="form.ENDTIME"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item> -->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleSe = false">取 消</el-button>
        <el-button type="primary" @click="saveSe()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 排班复制弹出框 -->
    <el-dialog
      title="排班复制"
      :visible.sync="isVisibleFz"
      width="60%"
      :modal="false"
    >
      <el-form ref="form" :model="form" label-width="170px" class="flex">
        <el-form-item label="原日期：" class="wid50">
          <el-date-picker
            v-model="form.WORKDATE"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="新日期：" class="wid50">
          <el-date-picker
            v-model="form.NDATES"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleFz = false">取 消</el-button>
        <el-button type="primary" @click="saveFz()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 遗漏查询弹出框 -->
    <el-dialog
      title="遗漏查询"
      :visible.sync="isVisibleYL"
      width="60%"
      :modal="false"
    >
      <el-form ref="form" :model="form" class="flex">
        <el-form-item label="所属组织：" style="width: 40%">
          <el-select v-model="form.CLIENT_NO" placeholderb filterable>
            <el-option
              v-for="item in clientList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询日期：" style="width: 40%">
          <el-date-picker
            v-model="form.WORKMONTH"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="作业类型：">
          <el-select v-model="workType" placeholder>
            <el-option
              v-for="item in workTypeList"
              :key="item.WORKTYPE"
              :label="item.WORKTYPE"
              :value="item.WORKTYPE"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button size="mini" type="primary" @click="getPlanlYLList"
            >查 询</el-button
          ></el-form-item
        >
      </el-form>

      <el-table
        v-loading="loading"
        :data="
          PlanlYLData.slice(
            (currentPage - 1) * pageSize,
            currentPage * pageSize
          )
        "
        highlight-current-row
        border
      >
        <el-table-column
          prop="WORKDATE"
          label="日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="LINENUM"
          label="未排班路线数"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleYLX()"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 遗漏详情弹出框 -->
    <el-dialog
      title="遗漏详情"
      :visible.sync="isVisibleYLX"
      width="60%"
      :modal="false"
    >

      <el-table
        v-loading="loading"
        :data="
          PlanlYLXData.slice(
            (currentPage - 1) * pageSize,
            currentPage * pageSize
          )
        "
        highlight-current-row
        border
        height="400"
        empty-text="无遗漏排班数据"
      >
        <el-table-column
          prop="LINENAME"
          label="路线名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="SNAME"
          label="班次名称"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
// import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      addDialogTitle: '',
      loading: false,
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      // 人员管理
      person: {
        SNAME: '',
        NAME: '',
        LICENSE_PLATE: '',
        client: '',
        clientList: [],
        roadList: [],
        team: '',
        teamList: [],
        typeList: [{
          typeNO: '1',
          typeNAME: '人员',
        }, {
          typeNO: '2',
          typeNAME: '任务',
        }]
      },
      // 新增人员
      newPersonForm: {
        show: false,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      },
      tableData: [],
      originalData: [],
      ScheduleData: [],
      LineData: [],
      VehicleData: [],
      DriverData: [],
      NData: [],
      PlanlYLData: [],
      PlanlYLXData: [],
      areaList: [],
      clientList: [],
      personSettingForm: {
        show: false
      },
      workTypeList: [],
      workType: '',
      typeList: [{
        typeNO: '1',
        typeNAME: '车辆',
      }, {
        typeNO: '2',
        typeNAME: '司机',
      }],
      form: {
        Type: '1',
        VID: '',
        DID: '',
      },
      STARTDATE: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      ENDDATE: formatDate(new Date(new Date().getTime() + 3600 * 1000 * 24 * 30), 'yyyy-MM-dd'),
      isVisibleEdit: false,
      isVisibleSe: false,
      isVisibleFz: false,
      isVisibleYL: false,
      isVisibleYLX: false,
      isVisibleRoad: false,
      isVisibleRoadInfo: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now();;
        },
      }
    }
  },
  created () {
    this.getClientList(); // http://111.160.78.62:9929/CompanyapiBDEapi/Role/GetLoginInfo?UserID=adminz
    this.getlistdata();
    this.getWorkTypeInfo();
  },
  methods: {
    async getClientList () {
      var url = 'Vehicle/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
      let { data } = await this.$Http.get(url)
      this.clientList = data
      // this.person.clientList.unshift({"CLIENT_NO":"0","CLIENT_NAME":"全部"})
      // this.attendanceMonth.records.teamList = data
    },
    // async getScheduledata () {
    //   var url = 'Vehicle/getSchedulePB?ClientNo=' + this.form.CLIENT_NO
    //   const { data } = await this.$Http.get(url)
    //   this.ScheduleData = data
    // },
    async getWorkTypeInfo () {
      var url = 'Vehicle/GetWorkTypeInfoPB'
      const { data } = await this.$Http.get(url)
      this.workTypeList = data
    },
    async getLineList () {
      const { data } = await this.$Http.get('Vehicle/GetLineInfoPB?ORDERTYPE=2&ClientNo=' + this.form.CLIENT_NO + '&LINENAME=&WORKTYPE=' + this.form.WORKTYPE)
      this.LineData = data
    },
    async getVehicleList () {
      if (this.addDialogTitle === '新增排班计划') {
        const { data } = await this.$Http.get('Vehicle/GetPlanUseInfo?ClientNo=' + this.form.CLIENT_NO + '&CarType=' + this.form.WORKTYPE + '&LINEID='
          + this.form.LINEID + '&Type=1&StartDate=' + this.form.StartDate + '&EndDate=' + this.form.EndDate + '&PID=-1')
        this.VehicleData = data
        this.getDriverList()
      } else {
        const { data } = await this.$Http.get('Vehicle/GetPlanUseInfo?ClientNo=' + this.form.CLIENT_NO + '&CarType=' + this.form.WORKTYPE + '&LINEID='
          + this.form.LINEID + '&Type=1&StartDate=' + this.form.StartDate + '&EndDate=' + this.form.EndDate + '&PID=' + this.form.PID)
        this.VehicleData = data
        this.getDriverList()
      }
    },
    async getDriverList () {
      var DriverType = this.VehicleData.filter(item => item.ID === this.form.VID)[0]
      if (this.addDialogTitle === '新增排班计划') {
        const { data } = await this.$Http.get('Vehicle/GetPlanUseInfo?ClientNo=' + this.form.CLIENT_NO + '&CarType=' + DriverType.TYPE + '&LINEID='
          + this.form.LINEID + '&Type=2&StartDate=' + this.form.StartDate + '&EndDate=' + this.form.EndDate + '&PID=-1')
        this.DriverData = data
      } else {
        const { data } = await this.$Http.get('Vehicle/GetPlanUseInfo?ClientNo=' + this.form.CLIENT_NO + '&CarType=' + DriverType.TYPE + '&LINEID='
          + this.form.LINEID + '&Type=2&StartDate=' + this.form.StartDate + '&EndDate=' + this.form.EndDate + '&PID=' + this.form.PID)
        this.DriverData = data
      }
    },
    async getNewList () {
      const { data } = await this.$Http.get('Vehicle/GetControlNewInfoPB?PID=' + this.form.PID + '&Type=' + this.form.sTYPE)
      this.NData = data
    },
    async changeClientOptions () {
      // this.getScheduledata()
      this.getLineList()
      this.getVehicleList()
      this.getDriverList()
    },
    //获取工地列表
    // async getlistdata () {
    //   var url = 'Vehicle/GetLineInfoPB?LINENAME=&WORKTYPE='+this.select.worktype+'&ClientNO=' + this.select.lotClientNo
    //   const { data } = await this.$Http.get(url)
    //   this.tableData = data;
    // },
    async getlistdata () {
      this.loading = true
      var url = 'Vehicle/GetPlanInfoPB?ClientNo=' + localStorage.getItem('CLIENT_NO')
        + '&SNAME=' + this.person.SNAME + '&LICENSE_PLATE=' + this.person.LICENSE_PLATE
        + '&NAME=' + this.person.NAME + '&LID=' + '&TYPE=' + '&STARTDATE=' + this.STARTDATE
        + '&ENDDATE=' + this.ENDDATE + '&WORKTYPE=' + this.workType
      const { data } = await this.$Http.get(url)
      this.tableData = data
      this.loading = false
      // this.personQuery()
    },
    // 人员管理查询
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      const { SNAME, NAME } = this.person
      if (SNAME) this.tableData = this.tableData.filter(item => item.SNAME.includes(SNAME))
      if (NAME) this.tableData = this.tableData.filter(item => item.NAME.includes(NAME))
      // this.getlistdata()
      this.loading = false
    },
    // 新增标段
    handleAdd () {
      this.addDialogTitle = '新增排班计划'
      //清空编辑框
      this.form = {}
      //展示窗口
      this.isVisibleEdit = true;
    },
    // 打开编辑窗口
    handleEdit (index, row) {
      this.form = Object.assign({}, row);
      this.addDialogTitle = '编辑排班计划'
      // this.getScheduledata()
      this.form.StartDate = this.form.WORKDATE
      this.form.EndDate = this.form.WORKDATE
      this.getLineList()
      this.getVehicleList()
      this.getDriverList()
      setTimeout(() => {
        this.isVisibleEdit = true;
      }, 2000);
      
    },
    // 遗漏查询
    async handleYL (index, row) {
      this.form = Object.assign({}, row);
      this.isVisibleYL = true;
    },
    async getPlanlYLList () {
      const { data } = await this.$Http.get('Vehicle/PlanlInfoYZPB?ClientNo=' + this.form.CLIENT_NO + '&WORKMONTH=' + this.form.WORKMONTH + '&WORKTYPE=')
      this.PlanlYLData = data
    },
    // 遗漏详情查询
    async handleYLX () {
      this.isVisibleYLX = true;
      this.getPlanlYLXList();
    },
    async getPlanlYLXList () {
      const { data } = await this.$Http.get('Vehicle/PlanlInfoYZDETAILPB?ClientNo=' + this.form.CLIENT_NO + '&WORKMONTH=' + this.form.WORKMONTH + '&WORKTYPE=')
      this.PlanlYLXData = data
    },
    // 打开排班窗口
    handleFz (index, row) {
      this.form = Object.assign({}, row);
      this.isVisibleFz = true;
    },
    // 保存排班复制
    async saveFz () {
      const params = {
        ODATES: this.form.WORKDATE,
        NDATES: this.form.NDATES,
        TYPE: '2',
      }
      const { data } = await this.$Http.get('/Vehicle/CopyPlanlInfoPB', { params })

      if (data.IsSucess) {
        this.$message({
          message: '排班复制成功',
          type: 'success'
        })
        this.isVisibleFz = false
        this.getlistdata()
      } else {
        this.$message.error('排班复制失败');
      }
    },

    // 打开临时调度窗口
    handleSe (index, row) {
      this.form = Object.assign({}, row);
      this.isVisibleSe = true;
      this.getLineList()
      this.getVehicleList()
    },
    // 保存临时调度
    async saveSe () {
      if (this.form.sTYPE === '1') {
        this.form.OID = this.form.VID
      } else {
        this.form.OID = this.form.DID
      }

      this.$axios({
        url: 'Vehicle/SaveControlInfoPB',
        method: 'post',
        data: {
          CID: '-1',
          PID: this.form.PID,
          OID: this.form.OID,
          NID: this.form.NID,
          TYPE: this.form.sTYPE,
          STARTTIME: '',
          ENDTIME: '',
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('临时调度成功');
          this.isVisibleSe = false
          this.getlistdata()
        } else {
          this.$message.error('临时调度失败');
        }
      })
    },
    // 点击保存，判断是新增还是编辑操作
    handleSubmit () {
      if (this.addDialogTitle == '新增排班计划') {
        this.saveAdd()
      } else {
        this.saveEdit()
      }
    },
    // 新增保存
    async saveAdd () {

      // var str = '';
      // this.form.arrNAME.forEach(element => {
      //   str = str + element + ','
      // });
      // str = str.substring(0, str.length - 1);
      // this.form.VID = str

      this.$axios({
        url: 'Vehicle/SavePlanlInfoPB',
        method: 'post',
        data: {
          LINEID: this.form.LINEID,
          VID: this.form.VID,
          DID: this.form.DID,
          STARTDATE: this.form.StartDate,
          ENDDATE: this.form.EndDate,
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功');
          this.getlistdata()
          this.isVisibleEdit = false
        } else {
          this.$message.error('新增失败');
        }
      })


    },
    // 保存编辑
    async saveEdit () {

      this.$axios({
        url: 'Vehicle/UpdatePlanlInfoPB',
        method: 'post',
        data: {
          PID: this.form.PID,
          LINEID: this.form.LINEID,
          VID: this.form.VID,
          DID: this.form.DID,
        },

      }).then((res) => {
        if (res.data.IsSucess) {
          this.$message.success('编辑成功');
          this.isVisibleEdit = false
          this.getlistdata()
        } else {
          this.$message.error('编辑失败');
        }
      })
    },
    // 删除
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          PID: row.PID,
        }
        const { data } = await this.$Http.get('Vehicle/DeletePlanInfoPB', { params })
        if (data.IsSucess) {
          this.$message.success('删除成功')
          this.isVisibleEdit = false
          this.getlistdata()
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
        this.isVisibleEdit = false
      }

    },
    // 获取区域列表
    async getAreaList () {
      const areaData = await this.$Http.get('/DataListCompany/GetRoadByAreaApi?AreaName=' + this.personSettingForm.area)
      this.areaList = areaData.data
    },
    // 保存人员信息
    async savePerson () {
      const params = {
        ClientNo: this.personSettingForm.CLIENT_NO,
        Area: this.personSettingForm.area,
        StaffName: this.personSettingForm.name
      }
      await this.$Http.get('/DataListCompany/SaveStaffRoadApi', { params })
      this.personSettingForm.show = false
      // 刷新列表信息
      this.getlistdata()
      // console.log(data);
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style scoped lang='less'>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.new_person {
  .el-form {
    width: 300px;
    // height: 180px;
    margin: 10px auto;
    background-color: #dfe8f6;
    .el-form-item {
      margin-bottom: 20px;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      // padding-top: 10px;
      .el-button {
        margin: 0 10px;
        /deep/span {
          padding: 0 5px;
        }
      }
    }
  }
}
.box {
  display: block;
  position: relative;
  height: 10vw;
  overflow: auto;
}
.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.marquee_top {
  transition: all 1s;
  margin-top: -1.563vw;
}
.marquee_list li {
  height: 1.354vw;
  line-height: 1.354vw;
}
.marquee_list li span {
  padding: 0.26vw;
  font-size: 0.729vw;
}
</style>